<template>
  <div>
    <div class="clearfix">
      <a-button class="w-float-right" type="primary" size="small" :loading="loading" @click="saveBtnClick">
        保存
      </a-button>
    </div>
    <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
      <a-form-item label="Videos" class="ivu-form-item-clear-bottom">
        <top-videos ref="TOP_VIDEOS" :def-videos="home_videos" />
      </a-form-item>
      <a-form-item label="home/头像">
        <w-up-image ref="WUpImage" :souce-url="home_icon" />
      </a-form-item>
      <a-form-item label="home/标题">
        <a-input v-decorator="['home_title', { initialValue: model.home_title }]" placeholder="标题" />
      </a-form-item>
      <a-form-item label="home/简历" prop="mail">
        <a-input
          v-decorator="['home_jianli', { initialValue: model.home_jianli }]"
          type="url"
          placeholder="简历链接地址"
        />
      </a-form-item>
      <a-form-item label="关于我">
        <a-input
          v-decorator="['abouts', { initialValue: model.abouts }]"
          type="textarea"
          placeholder="关于我"
        />
      </a-form-item>
      <a-form-item label="专业技能">
        <a-input
          v-decorator="['expertise', { initialValue: model.expertise }]"
          type="textarea"
          placeholder="专业技能"
        />
      </a-form-item>
      <a-form-item label="工作经验">
        <a-input
          v-decorator="['experience_show', { initialValue: model.experience_show }]"
          type="textarea"
          placeholder="工作经验"
        />
      </a-form-item>
      <a-form-item label="工作经历">
        <a-input
          v-decorator="['works_show', { initialValue: model.works_show }]"
          type="textarea"
          placeholder="工作经历"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api, Admin } from '@/config/api'
import WUpImage, { OssImageUpType } from '@/components/global/imageUp/oss'
import TopVideos from '@/components/admin/web/me/videos'
import { WrappedFormUtils } from 'ant-design-vue/types/form/form'
import { Me } from '@/models/me'

@Component({
  name: 'AdminWeMe',
  layout: 'admin',
  components: {
    WUpImage,
    TopVideos
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Api.me.detail)
    return {
      model: data,
      home_icon: data.home_icon,
      home_videos: data.home_videos
    }
  },
  head () {
    return {
      title: '个人数据'
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' })
    }
  }
})
export default class Page extends Vue {
  form!: WrappedFormUtils;
  model!: Me;
  home_icon = '';
  home_videos = [];
  loading = false

  saveBtnClick () {
    this.loading = true;
    (this.$refs.WUpImage as OssImageUpType)
      .upImage()
      .then((url) => {
        this.home_icon = url
        this.home_videos = (this.$refs.TOP_VIDEOS as any).getData()
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$wAxios
              .$put(`${Admin.me.update}${this.model._id}`, {
                ...values,
                home_icon: this.home_icon,
                home_videos: this.home_videos
              })
              .then(() => {
                this.$message.success('更新成功')
              })
              .catch(() => {})
              .finally(() => {
                this.loading = false
              })
          }
        })
      })
      .catch(() => {
        this.loading = false
        this.$message.error('请选择图片')
      })
  }
}
</script>

<style scoped></style>
